<template>
	<view class="content">
		<view class="title" :style="{'margin-top':196+'rpx'}"></view>
		<view class="pic1-zh" v-if="language=='zh'">
			<image src="../../static/shuoming-1.png" mode="widthFix" class="pic1 animated fadeInLeft"></image>
		</view>
		<view class="pic2-en1" v-else>
			<image src="../../static/shuoming-4.png" mode="widthFix" class="pic1-en animated fadeInLeft"></image>
		</view>
		<view class="animated pic2 fadeInRight" v-if="language=='zh'">
			<image src="../../static/shuoming-2.png" mode="widthFix" class="pic3"></image>
		</view>
		<view class="animated pic2-en2 fadeInRight" v-else>
			<image src="../../static/shuoming-3.png" mode="widthFix" class="pic3-en"></image>
		</view>
		<view class="jiaru animated fadeInRight" @click="gotoBiaodan" v-if="language=='zh'"></view>
		<view class="jiaru-en animated fadeInRight" @click="gotoBiaodan" v-else></view>
		<!-- <view class="xiaologo animated fadeInUp" >
			
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				language:''
			}
		},
		onShow() {
			this.language = uni.getStorageSync('duoyuyan')
			console.log('当前页面语言类型：',this.language)
		},
		methods: {
			gotoBiaodan(){
				uni.navigateTo({
					url:'../biaodan/biaodan'
				})
			}
		}
	}
</script>

<style scoped>
	page{
		background: url(../../static/bg1.png) no-repeat center top;
		background-size: 100% auto;
	}
.pic1{
	width: 508rpx;
	margin-top: 36rpx;
}
.pic1-zh{
	width: 580rpx;
	margin-top: 36rpx;
}
.pic1-en{
	width: 558rpx;
	margin-top: 36rpx;
}
.pic2{
	width: 594rpx;
	height: 380rpx;
	overflow-y: scroll;
	margin-top: 0rpx;
	
}
.pic2::-webkit-scrollbar {
    -webkit-appearance: none;
}

.pic2::-webkit-scrollbar:vertical {
    width: 12rpx;
}

.pic2::-webkit-scrollbar:horizontal {
    height: 6rpx;
}

.pic2::-webkit-scrollbar-thumb {
    background-color: #adadad;
    border-radius: 10rpx;
    /* border: 2px solid #ffffff; */
}

.pic2::-webkit-scrollbar-track {
    border-radius: 10px;  
    /* background-color: #ffffff; */
}
.pic2-en1{
	width: 580rpx;
	/* height: 390rpx; */
	margin-top: 0rpx;
}
.pic2-en2{
	width: 580rpx;
	height: 390rpx;
	overflow-y: scroll;
	margin-top: 0rpx;
}
.pic2-en2::-webkit-scrollbar {
    -webkit-appearance: none;
}

.pic2-en2::-webkit-scrollbar:vertical {
    width: 12rpx;
}

.pic2-en2::-webkit-scrollbar:horizontal {
    height: 6rpx;
}

.pic2-en2::-webkit-scrollbar-thumb {
    background-color: #adadad;
    border-radius: 10rpx;
    /* border: 2px solid #ffffff; */
}

.pic2-en2::-webkit-scrollbar-track {
    border-radius: 10px;  
    /* background-color: #ffffff; */
}
.pic3{
	width: 566rpx;
}
.pic3-en{
	width: 568rpx;
}
.jiaru{
	width: 258rpx;
	height: 96rpx;
	background: url(../../static/btn-baoming.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top: 43rpx;
	animation-delay: 0.3s;
}
.jiaru-en{
	width: 258rpx;
	height: 96rpx;
	background: url(../../static/btn-baoming-en.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top: 43rpx;
	animation-delay: 0.3s;
}
.xiaologo{
	width: 750rpx;
	height: 394rpx;
	background: url(../../static/zhongxin.png) no-repeat center center;
	background-size: 100% 100%;
	animation-delay: 0.6s;
	/* margin-top: 20rpx; */
	animation-delay: 0.6s;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -375rpx;
}
</style>
